<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="layout" content="template" />
<title>..:Sprint::.</title>

<%--MODDING BY tntho--%>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'kanban.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'libs/bootstrap/css', file: 'bootstrap-colorpicker.css')}" type="text/css">
<script type="text/javascript" src="${resource(dir: 'libs/bootstrap/js', file: 'bootstrap-colorpicker.js')}"></script>
<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-ui.js')}"></script>
<script type="text/javascript" src="${resource(dir: 'js', file: 'dashboard.js')}"></script>
<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.blockUI.js')}"></script>
<script type="text/javascript" src="${resource(dir: 'js', file: 'bootstrap-contextmenu.js')}"></script>
<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.transit.min.js')}"></script>
<script>
	var GET_PROJECT_BY_USER = '<g:createLink controller="Issue" action="getProjectByUser"/>';
	var GET_PROJECT_BY_PROJECT = '<g:createLink controller="Issue" action="getUserStoryByProject"/>';
	var GET_ALL_TEAMS = '<g:createLink controller="Issue" action="getAllTeams"/>';
	var GET_CURRENT_SPRINT = '<g:createLink controller="Issue" action="getCurrentSprint"/>';
	var GET_STATUS = '<g:createLink controller="Issue" action="getStatus"/>';
	var GET_MEMBER_OF_TEAM = '<g:createLink controller="Issue" action="getMemberOfTeam"/>';
	var GET_KANBAN = '<g:createLink controller="Dashboard" action="kanban"/>';
	var UPDATE_STATUS = '<g:createLink controller="Dashboard" action="updateStatus"/>';
	var UPDATE_STATUS_ISSUE = '<g:createLink controller="Dashboard" action="updateStatusIssue"/>';
	var GET_ISSUE_FOR_KANBAN = '<g:createLink controller="Dashboard" action="getIssueBySprintID"/>';



$(function(){
	if(typeof(Storage)!=="undefined"){
		  if (sessionStorage.teamid && sessionStorage.sprintid){
		    	changeTeam(sessionStorage.teamid,'${g.createLink(controller: 'Dashboard', action: 'getSprintAndTeamMember')}');		    	
		    	$("#team").val(sessionStorage.teamid).attr('selected',true);
		    	$("#sprint").val(sessionStorage.sprintid).attr('selected',true);
		    	loadKanban(sessionStorage.teamid,sessionStorage.sprintid);
		  }
		  else{
			  sessionStorage.clear();
		  }
	}
	else{
		  document.getElementById("kanban").innerHTML="Sorry, your browser does not support web storage...";
	}
})

</script>
<%--------------------------%>


<style type="text/css">
.error {
	display: marker;
	position: inherit;
	color: white;
	border: 1px solid #CE1529;
	background: #3D3D3D;
	-webkit-border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	width: 100%;
}
</style>
<script type="text/javascript">
function checkSprint(){
	var date1 = new Date($('#datepicker1').val().trim().toString());
	var date2 = new Date($('#datepicker2').val().trim().toString());
	var obj = new Object();
	   obj.teamid =$('#teamHidden').val();
	   obj.dateStart =$('#datepicker1').val();
	   obj.dateEnd = $('#datepicker2').val();
	if(date2<=date1 || $('#datepicker1').val()=="" ||$('#datepicker2').val()==""){
		$("#bt_save").hide();
		$("#error").html("EndDate must be larger than StartDate").show();
    	}else{
    		$("#error").hide();
    		$("#bt_save").show();
 	   }
	    	 $.ajax({
	    		dataType:'json',
				url: '${g.createLink(controller: 'Sprint', action: 'checkSprint')}',					
				data:obj,
				cache:false,
				success: function(data){
					var check = data.check;
					if(check==false){
					$("#errorSprint").html("Sprint existed with this date!").show();
					$("#bt_save").hide();
					}else{
						$("#errorSprint").hide();
					}
				}
	    	 }); 	
}

function checkSprintEdit(){
	var date1 = new Date($('#datepicker1-edit').val().trim().toString());
	var date2 = new Date($('#datepicker2-edit').val().trim().toString());
	var obj = new Object();
	   obj.teamid =$('#teamHidden').val();
	   obj.sprintID=$("#sprintName-edit").attr('key');	
	   obj.dateStart =$('#datepicker1-edit').val();
	   obj.dateEnd = $('#datepicker2-edit').val();
	if(date2<=date1 || $('#datepicker1-edit').val()=="" ||$('#datepicker2-edit').val()==""){
		$("#bt_save-edit").hide();
		$("#error-edit").html("EndDate must be larger than StartDate").show();
    	}else{
    		$("#error-edit").hide();
    		$("#bt_save-edit").show();
 	   }
	    	 $.ajax({
	    		dataType:'json',
				url: '${g.createLink(controller: 'Sprint', action: 'checkSprintEdit')}',					
				data:obj,
				cache:false,
				success: function(data){
					var check = data.check;
					if(check==false){
					$("#errorSprint-edit").html("Sprint existed with this date!").show();
					$("#bt_save-edit").hide();
					}else{
						$("#errorSprint-edit").hide();
					}
				}
	    	 }); 	
}

$(function($){
	$("#bt_save").hide();	
	$( "#datepicker2,#datepicker1,#datepicker-edit,#datepicker2-edit").datepicker({
		dateFormat: 'yy-mm-dd'
    });	
	
    $('#datepicker2,#datepicker1').datepicker().on('changeDate', function(en) {
    	checkSprint();
        });

    $('#datepicker2-edit,#datepicker1-edit').datepicker().on('changeDate', function(en) {
    	checkSprintEdit();
        });

    $('#cr-sprint').on("click",function(){
       if($("#team option:selected").val()==""){
		  alert("Please choose a team!");
       }else{
        $("#errorSprint").hide();
        $("#error").hide();
		$('#create_modal').modal("show");
		$("#teamHidden").val($("#team option:selected").val());
		$('#datepicker1').val("");
        $('#datepicker2').val("");
        $("#bt_save").hide();
       }
		});
	/***********Save function (create)**********************************************************************************************************/
	jQuery("#form-create").validate({
		rules: {
			sprintName: {	                    
              required: true 
           },
        },
        messages: {
        	sprintName: "Please enter sprint name",
           },
           submitHandler: function(form){
        	   var obj = new Object();
        	   obj.teamid =$('#teamHidden').val();
        	   obj.sprintName =$('#sprintName').val();	
        	   obj.status =$('[name="status"] option:selected').val();
        	   obj.dateStart =$('#datepicker1').val();
        	   obj.dateEnd = $('#datepicker2').val();
		    	 $.ajax({
		    		type: 'POST',
					url: '${g.createLink(controller: 'Sprint', action: 'saveSprint')}',		
					data:obj,
					cache:false,
					success: function(){
						$('#sprintName').val('');
						$('#create_modal').modal("hide");
						$("#team").prop('selectedIndex', -1);
				    	location.reload();
					}
		    	 }); 	
		     }		         
     	});	
/**********************************************************************************************************************************/
	$('#ed-sprint').on("click",function(){
	       if($("#team option:selected").val()==""){
			  alert("Please choose a team!");
	       }else{
			    	$("#errorSprint-edit").hide();
			        $("#error-edit").hide();
			        $("#bt_save-edit").show();
				    $("#sprintName-edit").val($("#sprint option:selected").text());
				    $("#sprintName-edit").attr('key',$("#sprint option:selected").val());
					$("#teamHidden").val($("#team option:selected").val());
					var obj =new Object();
					obj.sprintID=$("#sprintName-edit").attr('key');
					$.ajax({
						type:'POST',
						url:'${g.createLink(controller:'Sprint',action:'showEdit')}',
						data:obj,
						cache:false,
						success:function(res){
							var start=new Date(res.dateStart).format("yyyy-mm-dd");
							var end=new Date(res.dateEnd).format("yyyy-mm-dd");
							$("#status-edit").val(res.status).attr('selected','selected');
							$('#datepicker1-edit').val(start);
							$('#datepicker2-edit').val(end);
							$('#edit_modal').modal("show");
<%--							if(res.status=="Open"){--%>
<%--								$('#edit_modal').modal("show");--%>
<%--							}else{--%>
<%--								alert("Cannot edit because status of this sprint is closed!");--%>
<%--							}--%>
							}
						});
		       }
			});

	
	/***********Save function (create)**********************************************************************************************************/
	$("#form-edit").validate({
		rules: {
			sprintName: {	                    
              required: true 
           },
        },
        messages: {
        	sprintName: "Please enter sprint name",
           },
           submitHandler: function(form){
        	   var obj = new Object();
        	   obj.sprintID=$("#sprintName-edit").attr('key');	
        	   obj.sprintName=$("#sprintName-edit").val();
        	   obj.status =$("#status-edit option:selected").val();
        	   obj.dateStart =$("#datepicker1-edit").val();
        	   obj.dateEnd = $('#datepicker2-edit').val();
		    	 $.ajax({
		    		type: 'POST',
					url: '${g.createLink(controller: 'Sprint', action: 'saveEditSprint')}',		
					data:obj,
					cache:false,
					success: function(){
						$('#sprintName').val('');
						$('#create_modal').modal("hide");
						$("#team").prop('selectedIndex', -1);
				    	location.reload();
					}
		    	 }); 	
		     }		         
     	});	
});
</script>
</head>
<body>
	<div class="body">
		<!-- Here show Team and Sprint combobox to choose***************************************************************************************-->		
		<div class="form-inline">	
		<label>Select a team</label>	 		
		<select id="team">
				<option value="" selected="selected">--Select a Team--</option>
				<g:each in="${teamList}" var="teams">
					<option value="${teams.id}">
						${teams.teamName}
					</option>
				</g:each>
		</select>
		<label>Select a sprint</label>	 		
		<select id="sprint"></select>
		<a class="btn btn-info" id="ed-sprint" action="showRetrospective" href="#"><i class="icon-white"></i> Edit sprint</a>
		<a class="btn btn-info" id="cr-sprint" action="showRetrospective" href="#"><i class="icon-white"></i> New sprint</a>
		<span style="float:right;margin-bottom:10px;"><a href="#" data-toggle="modal" data-target="#formSetting"><img alt="setting" src="../images/skin/setting.png"> Setting </a></span>
		<span style="float:right;margin-bottom:10px;margin-right:30px;" id="add-issue"><a href="#" data-toggle="modal" data-target="#formIssue"><img alt="setting" src="../images/skin/add-icon.png"> Add new issue </a></span>							 	
	</div>	

<%--MODDING BY tntho--%>
	<div id="kanban" style="margin-top: 30px;"></div>
	<div class="dropdown" id="assign-menu">
		  <ul class="dropdown-menu dropdown" role="menu" id="assign-menu" aria-labelledby="dLabel">
		  </ul>
	</div>
<%--------------------%>
	
		<!-- Here put modal popup**************************************************************************************************************** -->
		<div id="create_modal" class="modal hide fade"
			style="width: 700px; align: center">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4>Create new sprint</h4>
			</div>
			<div class="modal-body">
				<form id="form-create">
				    <input type="hidden" value="" id="teamHidden"/>
					<table class="table table-bordered">
						<tr>
							<td>Sprint name:</td>
							<td><input type="text" id="sprintName" required="required"/></td>
						</tr>
						<tr>
							<td>Status:</td>
							<td><select style="width: 100px" name="status" disabled="disabled"> 
									<option value="Open" selected="selected">Open</option>
									<option value="Close">Close</option>
							</select></td>
						</tr>
						<tr>
							<td>Start date:</td>
							<td><input type="text" id="datepicker1" data-date-format="yyyy-mm-dd" readonly  placeholder="../../.."/><br><span style="display: none;" id="errorSprint" class="error" >
							</span>
							</td>
						</tr>
						<tr>
							<td>End date:</td>
							<td><input type="text" id="datepicker2" data-date-format="yyyy-mm-dd"  readonly  placeholder="../../.." /><br>
								<span  id="error" class="error" style="display: none;"></span>
							</td>
						</tr>
					</table>
					<div class="modal-footer">
						<input type="submit" id="bt_save" class="btn btn-info" value="Save">
						<button class="btn btn-info" data-dismiss="modal" aria-hidden="true" size="50px">Cancel</button>
					</div>
				</form>
			</div>
		</div>
				<!-- Here put modal popup edit**************************************************************************************************************** -->
		<div id="edit_modal" class="modal hide fade"	style="width: 700px; align: center">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4>Edit new sprint</h4>
			</div>
			<div class="modal-body">
				<form id="form-edit">
					<table class="table table-bordered">
						<tr>
							<td>Sprint name:</td>
							<td><input type="text" id="sprintName-edit" required="required"/></td>
						</tr>
						<tr>
							<td>Status:</td>
							<td><select style="width: 100px" id="status-edit"> 
									<option value="open" selected="selected">Open</option>
									<option value="closed">Closed</option>
							</select></td>
						</tr>
						<tr>
							<td>Start date:</td>
							<td><input type="text" id="datepicker1-edit" data-date-format="yyyy-mm-dd" readonly  placeholder="../../.."/><br><span style="display: none;" id="errorSprint-edit" class="error" >
							</span>
							</td>
						</tr>
						<tr>
							<td>End date:</td>
							<td><input type="text" id="datepicker2-edit" data-date-format="yyyy-mm-dd"  readonly  placeholder="../../.." /><br>
								<span  id="error-edit" class="error" style="display: none;"></span>
							</td>
						</tr>
					</table>
					<div class="modal-footer">
						<input type="submit" id="bt_save-edit" class="btn btn-info" value="Save">
						<button class="btn btn btn-info" data-dismiss="modal" aria-hidden="true" size="50px">Cancel</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	
<%-- MODDING BY tntho --%>
<script type="text/javascript">
	$(function(){
		$('.content').css({'width':'100%'});
		$('#kanban').on('click','.dropdown-menu',function(){
			return false;
		});
		//Handle select event - set value for Select sprint when change Select team 
		$('#team').change(function(){
			changeTeam($(this).val(),'${g.createLink(controller: 'Dashboard', action: 'getSprintAndTeamMember')}');
			if($(this).val() && $('#sprint').val()){
				sessionStorage.teamid= $(this).val();
				sessionStorage.sprintid = $('#sprint').val();
				loadKanban($(this).val(),$('#sprint').val());				
			}else{
				$('.board').fadeOut(200,function(){
					$('#kanban').children().remove();
				});
			}
		});
		$('#sprint').change(function(){
			sessionStorage.sprintid = $('#sprint').val();
			loadKanban($('#team').val(),$(this).val());			
		});	

		//Handle click event on avatar in header of sticker
		$('#kanban').on('click','.sticker .sticker-header .avatar', function(e) {
			e.stopPropagation();
			$('#context-menu').removeClass('open');
			var avatar = $(this);
			var issueID = $(this).parents('.sticker').attr('id');
			var menu = $('#assign-menu');
			var position = $(this).offset();

			//Remove click event on assign-menu
			menu.find('li a').off("click");

			//Add click event to assign-menu
			menu.find('li a').click(function(){
				var memberID = $(this).attr('id');
			      $.get('${g.createLink(controller: 'Dashboard', action: 'assignMemberForIssue')}',{memberID: memberID, issueID: issueID},
					      function(data){
							avatar.attr('src','../avatarImages/'+data.avatar);
				   		})
				  $('#assign-menu').find('.dropdown-menu').first().stop(true, true).slideUp(100);
				  return false;			      
			})
			
			menu.find('.dropdown-menu').first().stop(true, true).slideUp();		

			//Set position and show assign-menu when click on avatar
			menu.offset({ top: position.top+30, left: position.left });
			menu.find('.dropdown-menu').first().stop(true, true).slideDown(200);
		})
		
		//Close assign-menu when click out web page
		$(document).on('click', function () {
			$('#assign-menu').find('.dropdown-menu').first().stop(true, true).slideUp(200);
	    });		   

	});
</script>

</body>
</html>
